<template>
  <!-- <div class="box"> -->
  <div class="zujian">
    <div class="hidePhone"
         v-if="phoneStatus == false">{{phone}}</div>
    <div class="icobox">
      <!--  -->
      <van-popover v-model:show="showPopover"
                   theme="light"
                   @click="exitCilck"
                   placement="bottom-end"
                   :actions="actions">
        <template #reference>
          <van-icon name="manager" />
        </template>
      </van-popover>
    </div>
  </div>
  <!-- </div> -->

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'

// import md5 from 'blueimp-md5'
// ~@/assets/logo.png
import { useRoute, useRouter } from 'vue-router'

import { Toast, Popover } from 'vant'
import { Storage } from '@/utils/Storage'
import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import { useStore } from '@/store'

export default defineComponent({
  props: {
    phoneStatus: {
      type: Boolean
    },
    quitphone: {
      type: String || Number
    }
  },
  name: 'Login',
  components: {},
  setup() {
    const { proxy }: any = getCurrentInstance()
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const showPopover = ref(false)
    const actions = ref([{ text: '退出' }])
    const state: any = reactive({
      num: 10,
      phone: ''
    })
    const onSelect = (action) => Toast(action.text)
    function exitCilck() {
      console.log('sssss')
      // Storage.remove(MOBILE_TOKEN)
      proxy.$emit('exitCilck')
    }
    // 组件-完
    onMounted(() => {
      if (proxy.showPopover == false) {
        if (localStorage.getItem('h5phone')) {
          state.phoneStatus = true
          var str: any = localStorage.getItem('h5phone')
          var pat = /(\d{3})\d*(\d{4})/
          state.phone = str.replace(pat, '$1****$2')
        }
      }
      // state.phone = proxy.quitphone
      if (proxy.quitphone) {
        state.phoneStatus = true
        var str: any = proxy.quitphone
        var pat = /(\d{3})\d*(\d{4})/
        state.phone = str.replace(pat, '$1****$2')
      }
    })

    return {
      ...toRefs(state),
      showPopover,
      actions,
      onSelect,
      exitCilck
    }
  }
})
</script>

<style lang="scss" scoped>
.zujian {
  padding-top: 10px;
  display: flex;
  position: absolute;

  .hidePhone {
    background: #fff;
    position: absolute;
    padding: 1px 10px;
    height: 30px;
    line-height: 30px;
    border-radius: 0 20px 20px 0;
    opacity: 0.7;
  }
  .icobox {
    // position: absolute;
    top: 5px;
    margin-left: 340px;
    font-size: 20px;
    color: #fff;
    opacity: 0.8;
  }
}
// ::v-deep .van-popover__action {
//   margin-left: 20px !important;
//   width: 50px !important;
// }
// ::v-deep .van-popover__content {
//   margin-left: 20px !important;

//   width: 50px !important;
// }
</style>
